.page{
  width: 100%;
  height: 100vh;
  .title{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    .name{
      color: black;
      font-size: 8vw;
      margin: 10vw 0 2vw 0;
      animation: nameAction 3s linear;
    }
    @keyframes nameAction {
      0%,50%{
        color: red;
        z-index: 1002;
        transform: translateY(55vw);
        opacity: 0;
      }
      50%,70%{
        color: red;
        z-index: 1002;
        transform: translateY(50vw);
        opacity: 1;
      }
      70%,100%{
        color: black;
        z-index: 1002;
        transform: translateY(0vw);
        opacity: 1;
      }
    }
    .author{
      color: grey;
      font-size: 5vw;
      animation: authorAction 3s linear;
    }
    @keyframes authorAction {
      0%,50%{
        z-index: 1002;
        transform: translateY(50vw);
        opacity: 0;
      }
      50%,70%{
        z-index: 1002;
        transform: translateY(50vw);
        opacity: 1;
      }
      70%,100%{
        z-index: 1002;
        transform: translateY(0vw);
        opacity: 1;
      }
    }
  }
  .container{
    width: 100%;
    margin-top: 10vw;
    padding-bottom: 20vw;
    .mainImg{
      width: 80vw;
      height: 80vw;
      margin-left: 10vw;
    }
    .operation{
      width: 100%;
      margin: 10vw 0;
      padding: 10vw 0;
      border-top: solid 1px black;
      border-bottom: solid 1px black;
      display: flex;
      justify-content: center;
      align-items: center;
      .left{
        width: 50%;
        .time,.type{
          margin-bottom: 5vw;
        }
        .showGallery{
          width: 20vw;
          text-align: center;
          padding: 2vw;
          color: white;
          background-color: black;
        }
      }
      .right{
        .changeSpe{
          width: 40vw;
          height: 10vw;
          font-size: 4vw;
          background-color: white;
          border: solid 1px black;
          border-radius: 2vw;
          display: flex;
          justify-content: center;
          align-items: center;
          .text{
            display: inline-block;
          }
        }
        .price{
          margin: 5vw 0;
        }
        .btnNum{
          width: 35vw;
          height: 10vw;
          display: flex;
          text-align: center;
          line-height: 10vw;
          border: solid 1px gray;
          border-radius: 5vw;
          .sub{
            width: 30%;
            border-top-left-radius: 5vw;
            border-bottom-left-radius: 5vw;
          }
          .sub:active{
            background-color: black;
            color: white;
          }
          .num{
            width: 40%;
            border-left: solid 1px gray;
            border-right: solid 1px gray;
          }
          .add{
            width: 30%;
            border-top-right-radius: 5vw;
            border-bottom-right-radius: 5vw;
          }
          .add:active{
            background-color: black;
            color: white;
          }
        }
        .btnCart{
          margin-top: 5vw;
          width: 35vw;
          height: 10vw;
          border-radius: 5vw;
          background-color: black;
          color: white;
          display: flex;
          justify-content: center;
          align-items: center;
        }
      }
    }
    .description{
      width: 100%;
      font-size: 5vw;
      margin: 5vw 0;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      .title{
        font-size: 7vw;
      }
      .text{
        width: 90%;
        text-indent: 10vw;
      }
    }
    .longPic{
      width: 100%;
      display: flex;
      justify-content: center;
      .pic{
        width: 90%;
      }
    }
    .addComment{
      width: 100%;
      display: flex;
      justify-content: center;
      margin: 10vw 0;
      padding: 10vw 0;
      .box{
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: flex-end;
        border-top: solid 1px gray;
        border-bottom: solid 1px gray;
        padding: 10vw 0;
        .textarea{
          width: 80vw;
          height: 30vw;
          border: solid 1px black;
          border-radius: 5vw;
          padding: 3vw;
        }
        .btn{
          width: 10vw;
          padding:2vw 3vw;
          background-color: black;
          color: white;
          border-radius: 2vw;
          margin: 3vw;
        }
      }
    }
    .comment{
      width: 100%;
      padding-left: 10vw;

      margin: 10vw 0;
      .info{
        width: 80%;
        display: flex;
        justify-content: flex-start;
        border-top: solid 1px rgb(226, 226, 226);
        padding-top: 5vw;
        .img{
          width: 10vw;
          height: 10vw;
          border-radius: 10vw;
        }
        .time{
          color: gray;
          font-size: 4vw;
          text-indent: 4vw;
        }
      }
      .text{
        width: 80%;
      }
    }
  }
}
.animationPage{
  width: 100%;
  height: 100vh;
  background-color: rgb(255, 246, 122);
  position: absolute;
  z-index: -1;
  left: 0;
  top: 0;
  opacity: 0;
  animation: animationPageAction 3s linear;
}
@keyframes animationPageAction{
  0%,50%{
    z-index: 1001;
    transform: translateY(0vh);
    opacity: 1;
  }
  50%,70%{
    z-index: 1001;
    transform: translateY(0vh);
    opacity: 1;
  }
  70%,100%{
    z-index: 1001;
    transform: translateY(-100vh);
    opacity: 1;
  }
}